import React from 'react'


import LayoutContentWrapper from '@iso/components/utility/layoutWrapper';
import LayoutContent from '@iso/components/utility/layoutContent';
import {Fieldset, Form, Label} from "../../../FirestoreCRUD/Article/Article.styles";

import axios from "../../../../http";
import Qs from 'qs'
import message from '@iso/components/Feedback/Message';
import MessageContent from "../../../Feedback/Message/Message.styles";
import {withRouter} from "react-router";
import PageHeader from '@iso/components/utility/pageHeader';
import Button from '@iso/components/uielements/button';
import Input from '@iso/components/uielements/input';
import Card from "../../../UIElements/Card/Card.styles";

class Profile extends React.Component {


    constructor(props) {

        super(props);

        this.state={};

    }
    componentWillUnmount() {

    }

    componentDidMount() {
      this.loadUser();
    }

    loadUser=()=>{
        axios.post('api/core/access/user/getLoginUser', Qs.stringify({

        }),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then((response)=>{
                let  data=response.data.data;
                this.setState(data)
            })
            .catch(function (error) {
                this.showErrorMessage(error);
            });
    }

    updateProfile=()=>{
        let entity={
            "realName":this.state.realName,
            "email": this.state.email,
            "phone":this.state.phone,
            "mobilePhone":this.state.mobilePhone,
            "company":this.state.company
        }
        axios.post('api/core/access/user/updateProfile', Qs.stringify({
            requestJson:JSON.stringify(entity)
            }
        ),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then((response)=>{
                let  data=response.data;
                if(data.status==1){
                    this.showSuccessMessage(data.message)
                }else{
                    this.showErrorMessage(data.message);
                }
            })
            .catch(function (error) {
                this.showErrorMessage(error);
            });
    }

    onRecordChange = (event, key) => {
        let state={};
        state[key]=event.target.value;
        this.setState(state)
    };

    showSuccessMessage (systemMessage){
        message.success(
            <MessageContent>
                {systemMessage}
            </MessageContent>,
            5
        );
    };
    showErrorMessage (systemMessage){
        message.error(
            <MessageContent>
                {systemMessage}
            </MessageContent>,
            5
        );
    };


    render() {

        return (
            <LayoutContentWrapper style={{ height: '120vh' }}>
                <PageHeader>
                    个人资料
                </PageHeader>
                <LayoutContent>

                    <Card
                        title='用户信息'
                        style={{ width: '100%' }}
                    >
                        <Form>
                            <Fieldset>
                                <Label>*用户名:</Label>
                                {this.state.name}
                            </Fieldset>
                            <Fieldset>
                                <Label>*姓名:</Label>
                                <Input

                                    placeholder="请输入用户真实姓名"
                                    value={this.state.realName}
                                    onChange={e => this.onRecordChange(e, 'realName')}
                                />
                            </Fieldset>
                            <Fieldset>
                                <Label>*电子邮箱:</Label>
                                <Input

                                    placeholder="电子邮箱"
                                    value={this.state.email}
                                    onChange={e => this.onRecordChange(e, 'email')}
                                />
                            </Fieldset>
                            <Fieldset>
                                <Label>联系电话:</Label>
                                <Input

                                    placeholder="联系电话"
                                    value={this.state.phone}
                                    onChange={e => this.onRecordChange(e, 'phone')}
                                />
                            </Fieldset>
                            <Fieldset>
                                <Label>手机号码:</Label>
                                <Input

                                    placeholder="手机号码"
                                    value={this.state.mobilePhone}
                                    onChange={e => this.onRecordChange(e, 'mobilePhone')}
                                />
                            </Fieldset>
                            <Fieldset>
                                <Label>公司:</Label>
                                <Input

                                    placeholder="公司"
                                    value={this.state.company}
                                    onChange={e => this.onRecordChange(e, 'company')}
                                />
                            </Fieldset>

                            <Fieldset>
                                <Label>所属机构:</Label>
                                {this.state.departmentName}
                            </Fieldset>
                            <Fieldset>
                                <Label>角色:</Label>
                                {this.state.roles}
                            </Fieldset>

                            <Fieldset>
                                <Button type="primary" size='small' onClick={this.updateProfile}>
                                    提交
                                </Button>
                            </Fieldset>

                        </Form>

                    </Card>



                </LayoutContent>
            </LayoutContentWrapper>

        )
    }




}
// this wrapper is for fixing bug that we can not get this.props.location
export default withRouter(Profile)
